<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Isaac Wiki</title>
</head>

<style>
    html {
        margin: 0;
        padding: 0;
        height: 100%;
        background: url('img/background.png') no-repeat center center;
        background-size: 95%;
        background-color: #000;
        background-attachment: fixed;
        image-rendering: pixelated;
    }

    body {
        margin: 0;
        padding: 0;
        min-height: 100%;
    }

    #top {
        height: 50px;
        width: 100%;
        background-color: #000;
        display: flex;
        align-items: center; /* 垂直居中 */
        justify-content: space-between; /* 左右两端对齐 */
        padding: 0 10px;
        box-sizing: border-box;
    }

    #loge {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    #loge img {
        height: 40px;
        width: 40px;
        image-rendering: pixelated;
    }

    #loge p {
        color: #d1d1d1;
        font-size: 20px;
        margin: 0;
    }

    #login {
        height: 50px;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    #login p {
        color: #d1d1d1;
        font-size: 16px;
        margin: 0;
        user-select: none;
    }

    .operaButton {
        height: 30px;
        padding: 0 12px;
        background-color: #3a3a3a;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 10px;
        border-radius: 6px;
        cursor: pointer;
        transition: background-color 0.2s ease;
        box-sizing: border-box;
    }

    .operaButton:hover {
        background-color: #505050;
    }

    #content {
        margin: 0 auto;
        width: 75%;
        min-height: calc(100vh - 50px);
        background-color: #2c2925;
    }

    #titleImg {
        width: 100%;
    }

    #titleImg img {
        display: block;
        margin: 0 auto;
    }

    #navigationBar {
        min-height: 100px;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
    }

    #navigationBar img {
        display: block;
        height: 43px;
        width: 150px;
        margin: auto 0;
        cursor: pointer /* 鼠标悬停时显示手形图标 */
    }

    .custom-line {
        border: none;
        border-top: 2px dashed #d1d1d1;
        width: 90%;
        margin: 20px auto;
    }

    #wikiInfo {
        width: 100%;
    }

    #infoTitle {
        margin: 0 auto;
        background-color: #202e63;
        width: 80%;
    }

    #infoTitle h3 {
        color: #d1d1d1;
        text-align: center;
    }

    #infoText {
        margin: 0 auto;
        width: 80%;
    }

    #infoText p {
        color: #d1d1d1;
        text-align: center;
    }
</style>
<body>
    <div id="top">
        <div id="loge">
            <img src="img/site_avatar_isaac_l.webp" alt="Isaac Wiki">
            <p>以撒的结合Wiki</p>
        </div>
        <div id="login">
            <!-- 预留登录/注册区域 -->
        </div>
    </div>
    <div id="content">
        <div id="titleImg">
            <img src="img/titleImg.png" alt="Isaac Wiki">
        </div>

        <div id="navigationBar">
            <img src="img/225px-Items-button.png" alt="Item List" id="itemButton">
        </div>

        <hr class="custom-line">

        <div id="wikiInfo">
            <div id="infoTitle">
                <h3>关于以撒的结合wiki</h3>
            </div>
            <div id="infoText">
                <p>
                    欢迎来到以撒的结合wiki！您可以在这里查阅以撒的结合的相关内容以及帮助我们编辑、翻译、完善维基！
                </p>
                <p>
                    《以撒的结合：重生（The Binding of Isaac: Rebirth）》是一款集合了推箱子、血统检验、少女换装、宠物养成等等元素的地牢探险/Roguelite类跨世代大作。
                </p>
                <p>
                    《重生》共有四个DLC（可下载内容），分别是：《胎衣（Afterbirth）》《胎衣†（Afterbirth†）》《忏悔（Repentance）》《忏悔+（Repentance+）》
                </p>
            </div>
        </div>

    </div>

</body>

<script src="js/jQuery-3.7.1.min.js"></script>
<script>
    $(document).ready(function() {
        const jwt = localStorage.getItem("jwt");
        const loginDiv = $("#login");

        if (jwt) {
            // 有 jwt，显示头像、名称和登出按钮
            const name = localStorage.getItem("name") || "用户";
            const imgUrl = localStorage.getItem("imgUrl") || "img/default_avatar.png";

            const userHtml = `
    <img src="${imgUrl}" alt="头像" id="userAvatar" style="height:30px; width:30px; border-radius:50%; vertical-align:middle; margin-right:8px; object-fit:cover;">
    <p id="userName" style="color:#d1d1d1; font-size:16px; margin:0; line-height:30px; display:inline-block; vertical-align:middle;">${name}</p>
    <div id="logoutBtn" class="operaButton" style="margin-left:12px;">
        <p>登出</p>
    </div>
`;
            loginDiv.html(userHtml);

            // 登出按钮暂时不绑定事件，后续可以加
            $("#logoutBtn").click(() => {
                // 清除登录相关的 localStorage 信息
                localStorage.removeItem("jwt");
                localStorage.removeItem("name");
                localStorage.removeItem("imgUrl");
                // 你如果存了别的登录相关信息，也一起清理，比如 id、username 等等
                localStorage.removeItem("id");
                localStorage.removeItem("username");

                // 刷新页面
                location.reload();
            });

            // ✅ 绑定头像和用户名点击跳转 userInfo.html
            $("#userAvatar, #userName").click(() => {
                window.open("userInfo.html");
            });

        } else {
            $("#login").html(
                '<div id="loginBtn" class="operaButton">' +
                '<p>登录</p>' +
                '</div>' +
                '<div id="registerBtn" class="operaButton">' +
                '<p>注册</p>' +
                '</div>'
            )
            $("#loginBtn").click(function () {
                window.location.href = "login.html";
            });
            $("#registerBtn").click(function () {
                window.location.href = "register.html";
            });
        }


        $("#itemButton").click(function () {
            window.open("ItemList.html");
        })
    });
</script>
</html>